<script lang="ts" setup>
import { useAppStore } from '@/store/appStore'

uni.hideTabBar()
const { value: name } = useQuery('name')

const test = ref('')

uni.onThemeChange((res) => {
  test.value = res.theme
})

const appStore = useAppStore()
function checkEvent(val: any) {
  appStore.toggleStyle(val.detail.value)
}
</script>

<template>
  <view>{{ name }}</view>
  <HiCounter />
  <view>{{ test }}</view>

  <view>
    <radio-group @change="checkEvent">
      <label>
        <radio value="light" :checked="appStore.style === 'light'" />light
      </label>
      <label>
        <radio value="dark" :checked="appStore.style === 'dark'" />dark
      </label>
      <label>
        <radio value="gray" :checked="appStore.style === 'gray'" />gray
      </label>
      <label>
        <radio value="red" :checked="appStore.style === 'red'" />red
      </label>
    </radio-group>
    <view class="text-theme">
      当前选中: {{ appStore.style }}
    </view>
  </view>

  <LayoutsTabBar />
</template>
